<template>
	<view>
		<view class="top-bar bg-pink">
			<scroll-view scroll-x class="bg-pink nav text-center">
				<view class="cu-item" :class="0==tabCur?'text-white cur':''" @tap="tabSelect" data-id="0">
					<text class="cuIcon-selectionfill"></text> 推荐
				</view>
				<view class="cu-item" :class="1==tabCur?'text-white cur':''" @tap="tabSelect" data-id="1">
					<text class="cuIcon-newshotfill"></text> 最新
				</view>
				<view class="cu-item" :class="2==tabCur?'text-white cur':''" @tap="tabSelect" data-id="2">
					<text class="cuIcon-upstagefill"></text> 必看
				</view>
				<view class="cu-item" :class="3==tabCur?'text-white cur':''" @tap="tabSelect" data-id="3">
					<text class="cuIcon-hotfill"></text> 最热
				</view>

			</scroll-view>
		</view>
		<view class="content-top grid text-center col-2 ">
			<view class="cu-card case " v-for="(item,index) in vlist" :key="index" @tap="openVideo(item.aid,item.bvid)">
				<view class="cu-item shadow bg-blue" id="v-item">
					<view class="image ">
						<image class="v-pic" :src="item.pic" mode="aspectFit"></image>
						<view class="cu-bar bg-shadeBottom">
							<text class="text-cut">{{stPlay(item.play)}}</text>
							<text class="text-cut">{{item.length}}</text>
						</view>
					</view>

					<view class="cu-list margin-left-sm margin-top-sm">
						<view class="cu-item text-left text-Abc v-title">
							<text class="text-black text-lg ">{{item.title}}</text>
						</view>
						<view class="cu-item margin-bottom-sm text-left">
							<text class="text-grey iconfont ic_up">{{item.author}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		api
	} from '../../common/api.js';
	import {
		randomNum,
		UID
	} from '../../common/helper.js'
	export default {
		data() {
			return {
				tabCur: 0,
				isRefresh: false,
				page: {
					pn: 3,
					ps: 26,
					count: 30659
				},
				order: 'pubdate',
				vlist: [],
				videoCount: null,
				vlistTemp: []

			}
		},
		onLoad() {
			let data = {
				mid: UID,
				pn: 1,
				ps: 26,
				index: 1,
				jsonp: 'jsonp'
			};
			uni.request({
				url: api.search,
				data: data,
				success: (res) => {
					this.page = res.data.data.page
					this.videoCount = res.data.data.page.count
					this.getRandomList(8, true)
					setTimeout(function() {
						console.log('start pulldown');
					}, 1000);
					uni.startPullDownRefresh();
				}
			})


		},
		onPullDownRefresh() {
			console.log('refresh');
			if (this.tabCur == 0) {
				this.getRandomList(4)
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (!this.isRefresh) {
				console.log("触发底部加载事件");
				if (this.tabCur == 0) {
					this.getRandomList(6, true)
				}
			}
		},
		methods: {
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				if (this.tabCur == 0) {
					this.getRandomList(4)
				} else if (this.tabCur == 1) {
					this.order = 'pubdate'
					this.getOnePage()
				} else if (this.tabCur == 2) {
					this.order = 'click'
					this.getOnePage()
				} else if (this.tabCur == 3) {
					this.order = 'stow'
					this.getOnePage()
				}
			},
			getRandomList(pageSize, inTail = false) {
				var vlistR = []
				//获取一个随机数
				let pn = randomNum(1, parseInt(this.videoCount / pageSize))
				let data = {
					mid: UID,
					pn: pn,
					ps: pageSize,
					index: 1,
					jsonp: 'jsonp'
				};
				uni.request({
					url: api.search,
					data: data,
					success: (res) => {
						if (inTail) {
							this.vlist = this.vlist.concat(res.data.data.list.vlist)
						} else {
							this.vlist = res.data.data.list.vlist.concat(this.vlist)
						}
					},
					fail: (res) => {}
				})
			},
			getOnePage() {
				let data = {
					mid: UID,
					order: this.order,
					pn: 1,
					ps: this.page.ps,
					index: 1,
					jsonp: 'jsonp'
				};
				uni.request({
					url: api.search,
					data: data,
					success: (res) => {
						this.page = res.data.data.page;
						this.vlist = res.data.data.list.vlist;
					},
					fail: (res) => {

					}
				})
			},
			getNextPage() {
				let data = {
					mid: UID,
					pn: this.page.pn + 1,
					ps: this.page.ps,
					index: 1,
					jsonp: 'jsonp'
				};
				this.isRefresh == true;
				uni.request({
					url: api.search,
					header: {},
					data: data,
					success: (res) => {
						this.isRefresh == false;
						this.page = res.data.data.page;
						this.vlist = this.vlist.concat(res.data.data.list.vlist);
					},
					fail: (res) => {
						this.isRefresh == false;
					}
				})
			},
			openVideo(aid, bvid) {
				uni.navigateTo({
					url: '../video/video?aid=' + aid + '&bvid=' + bvid
				})
			},
			stPlay(play) {
				if (play > 10000) {
					play = play / 10000;
					play = play.toFixed(1);
					return play + 'W';
				}
				return play;
			}
		}
	}
</script>

<style>
	#v-item {
		margin: 10upx;
	}

	.v-pic {
		height: 200upx;
	}

	.v-title {
		height: 90upx;
		overflow: hidden;
	}

	.content-top {
		margin-top: 140upx;
	}
</style>
